<template name="accountEncryption">
	<section class="preferences-page preferences-page--new">
		{{#header sectionName="Encryption" buttons=true fullpage=true}}
			<div class="rc-header__section-button">
				<button class="rc-button rc-button--primary" name="send" type="submit" data-button="create" form="encryption" {{canSave 'disabled'}}>{{_ "Save_changes"}}</button>
			</div>
		{{/header}}

		<div class="preferences-page__content">
			<form id="encryption" autocomplete="off" class="container">
				{{# if isEnabled}}
				<fieldset>
					<div class="section">
						<div class="section-content border-component-color">

							<div class="preferences-page__title">
								<h1>{{_ "E2E_Encryption_Password_Change" }}</h1>
							</div>

							<div class="preferences-page__alert">
								{{{_ "E2E_Encryption_Password_Explanation" }}}
							</div>

							<div class="rc-input{{#if confirmationKeyInvalid}} rc-input--error{{/if}} rc-w50 padded">
								{{#with canChange=allowKeyChange}}
									<label class="rc-input__label">
										<div class="rc-input__title">{{_ "New_encryption_password"}}</div>
										<div class="rc-input__wrapper">
											<input name="encryptionKey" type="password" class="rc-input__element" placeholder="{{_ "New_Password_Placeholder"}}"  autocomplete="new-password" {{ifThenElse canChange '' 'disabled'}}>
										</div>
									</label>
									{{#if canConfirmNewKey}}
									<label class="rc-input__label">
										<div class="rc-input__title">{{_ "Confirm_new_encryption_password"}}</div>
										<div class="rc-input__wrapper">
											<input name="confirmation-encryptionKey" type="password" class="rc-input__element" placeholder="{{_ "Confirm_New_Password_Placeholder"}}" autocomplete="confirm-new-password">
										</div>
									</label>
									{{/if}}
									{{# unless canChange}}
										<div class="rc-input__description">{{_ 'EncryptionKey_Change_Disabled'}}</div>
									{{/unless}}
								{{/with}}
							</div>
						</div>
					</div>

					<div class="section">
						<div class="section-content border-component-color">
							<div class="preferences-page__title">
								<h1>{{_ "Reset_E2E_Key" }}</h1>
							</div>

							<div class="preferences-page__alert">
								{{{_ "E2E_Reset_Key_Explanation" }}}
							</div>

							<div class="rc-input rc-w50 padded">
								<label class="rc-input__label">
									<div class="rc-input__wrapper">
										<button class="rc-button rc-button--secondary" name="reset-e2e-key" type="button" data-button="create" form="encryption">{{_ "Reset_E2E_Key"}}</button>
									</div>
								</label>
							</div>
						</div>
					</div>
				</fieldset>

				{{else}}
					{{_ "Admin_disabled_encryption"}}
				{{/if}}
			</form>
		</div>
	</section>
</template>
